<template>
    <div>
        <div id="jx-contain">
            <div class="no-data-tips" v-if="displayVersion == ''">
               <img src="./../../../assets/images/index_no_data.png" />
               <p>暂无内容</p>
            </div>
            <!-- yx修改添加身份判断 -->
            <div v-else>
                <iframe id="iframetest" v-if="(roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER')" @load="iframetest" name="iframetest" width="100%" :height="hei" class="coursewareBox" :src="'../../../../static/generic/web/viewer.html?file=/tes/course/'+coursesId+/chapter/+ChapterId+'/resource/read'" frameborder="0" ></iframe>
                <iframe id="iframetest" v-if="roles == 'STUDENT'"  name="iframetest" width="100%" :height="hei" class="coursewareBox"  @load="iframeStudent" :src="'../../../../static/generic/web/viewer.html?file=/tes/course/'+coursesId+/chapter/+ChapterId+'/resource/read'" frameborder="0" ></iframe>
                <!-- <iframe id="iframetest" name="iframetest"  v-if="displayVersion != ''" :width="wid" :height="hei" allowfullscreen="true" allowtransparency="true" class="coursewareBox" :src="'../../../../static/generic/web/viewer.html?file=/tes/course/'+coursesId+/chapter/+ChapterId+'/resource/read'" frameborder="0"></iframe> -->
                <!-- <iframe :width="wid" :height="hei" allowfullscreen="true" allowtransparency="true" class="coursewareBox" :src="displayVersion" frameborder="0"></iframe> -->
                <div class="sideBox">
                    <ul v-if="(roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER') && _btn_flag == undefined">
                        <li @click="drawShowEvent" v-if="displayVersion != ''"><i class="iconfont icon-bianji-shi"></i>画笔</li>
                        <li class="sideBoxActive" v-else><i class="iconfont icon-bianji-shi"></i>画笔</li>
                        <li @click="videoDialog" v-if="videoUrlCopy != ''"><i class="iconfont icon-shipin1"></i>视频</li>
                        <li class="sideBoxActive" v-else><i class="iconfont icon-shipin1"></i>视频</li>
                        <li @click="openNoteWindow" v-if="displayVersion != ''" title="按页批注"><i :class="{ notePoint : noteActive==true }"></i><i class="iconfont icon-ico_compile_thick"></i>批注</li>
                        <li class="sideBoxActive" v-else title="按页批注"><i class="iconfont icon-ico_compile_thick"></i>批注</li>
                        <li @click="openQuestion" v-if="UserStatus == 'EXIST_CLASS' && displayVersion != ''" title="按页提问"><i :class="{ askPoint : notificationActive==true }"></i><i class="iconfont icon-wenda2"></i>提问</li>
                        <li class="sideBoxActive" v-else><i class="iconfont icon-wenda2" title="按页提问"></i>提问</li>
                    </ul>
                    <ul v-if="roles == 'STUDENT' && _btn_flag == undefined">
                        <!-- 学生端和白哥确定过没有画笔所以注释 -->
                        <!-- <li @click="drawShowEvent" v-if="displayVersion != ''"><i class="iconfont icon-bianji-shi"></i>画笔</li>
                        <li class="sideBoxActive" v-else><i class="iconfont icon-bianji-shi"></i>画笔</li>-->
                        <li @click="videoDialog" v-if="videoUrlCopy != ''"><i class="iconfont icon-shipin1"></i>视频</li>
                        <li class="sideBoxActive" v-else><i class="iconfont icon-shipin1"></i>视频</li>
                        <li @click="openNoteWindow" v-if="displayVersion != ''"><i :class="{ notePoint : noteActive==true }"></i><i class="iconfont icon-ico_compile_thick"></i>笔记</li>
                        <li class="sideBoxActive" v-else><i class="iconfont icon-ico_compile_thick"></i>笔记</li>
                    </ul>
                    <!-- 技能库进入 -->
                    <ul v-if="(roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER') &&_btn_flag">
                        <li @click="videoDialog" v-if="videoUrlCopy != ''"><i class="iconfont icon-shipin1"></i>视频</li>
                        <li class="sideBoxActive" v-else><i class="iconfont icon-shipin1"></i>视频</li>
                        <li @click="openNoteWindow" v-if="displayVersion != ''" title="按页批注"><i :class="{ notePoint : noteActive==true }"></i><i class="iconfont icon-ico_compile_thick"></i>批注</li>
                        <li class="sideBoxActive" v-else title="按页批注"><i class="iconfont icon-ico_compile_thick"></i>批注</li>
                    </ul>
                     <ul v-if="roles == 'STUDENT' && _btn_flag" >
                        <li @click="videoDialog" v-if="videoUrlCopy != ''"><i class="iconfont icon-shipin1"></i>视频</li>
                        <li class="sideBoxActive" v-else><i class="iconfont icon-shipin1"></i>视频</li>
                        <li @click="openNoteWindow" v-if="displayVersion != ''"><i :class="{ notePoint : noteActive==true }"></i><i class="iconfont icon-ico_compile_thick"></i>笔记</li>
                        <li class="sideBoxActive" v-else><i class="iconfont icon-ico_compile_thick"></i>笔记</li>
                    </ul>

                </div>
            </div>
        </div>
        <!-- 视频盒子 -->
        <el-dialog
            title="视频"
            :visible.sync="dialogVisible2"
            width="40%"
            @close='closeVideoDialog'
            >
            <video id="video" autoplay controls disablePictureInPicture  controlslist="nodownload"  class="videoShow" >
                 <source  :src="videoUrl" type="video/mp4">
            </video>
        </el-dialog>
        <!-- 笔记盒子 -->
        <div class="el-dialog__wrapper" id="onlyDialog" v-if="(roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER')">
            <div role="dialog" aria-modal="true" aria-label="批注" class="el-dialog" style="margin-top: 15vh; width: 490px;">
                <div class="el-dialog__header">
                    <span class="el-dialog__title">批注</span>
                    <button type="button" aria-label="Close" class="el-dialog__headerbtn"><i  @click="closeNoteWindow" class="el-dialog__close el-icon el-icon-close"></i></button>
                </div>
                <div class="el-dialog__body">
                    <el-input id="noteVal" type="textarea" v-model="noteVal" style="width: 450px; height: 200px;"></el-input>
                    <!-- <textarea id="noteVal" v-model="noteVal" style="width: 450px; height: 200px;"></textarea> -->
                </div>
                <div class="el-dialog__footer">
                    <span  class="dialog-footer">
                        <button @click="NoteSave" class="button-style saveNote">保存</button>
                    </span>
                </div>
            </div>
        </div>
        <!-- 学生笔记盒子 -->
        <div class="el-dialog__wrapper" id="onlyDialog" v-if="roles == 'STUDENT'">
            <div role="dialog" aria-modal="true" aria-label="笔记" class="el-dialog" style="margin-top: 15vh; width: 490px;">
                <div class="el-dialog__header">
                    <span class="el-dialog__title">笔记</span>
                    <button type="button" aria-label="Close" class="el-dialog__headerbtn"><i  @click="closeNoteWindow" class="el-dialog__close el-icon el-icon-close"></i></button>
                </div>
                <div class="el-dialog__body">
                    <el-input id="noteVal" type="textarea" v-model="noteVal" style="width: 450px; height: 200px;"></el-input>
                    <!-- <textarea id="noteVal" v-model="noteVal" style="width: 450px; height: 200px;"></textarea> -->
                </div>
                <div class="el-dialog__footer">
                    <span  class="dialog-footer">
                        <button @click="NoteSave" class="button-style saveNote">保存</button>
                    </span>
                </div>
            </div>
        </div>
        <!-- 提问盒子 -->
        <div class="el-dialog__wrapper" id="issueDialog" v-show="dialogVisible4" @close='closeDialg' :close-on-click-modal="false">
            <div role="dialog" aria-modal="true" aria-label="笔记" class="el-dialog" style="margin-top: 15vh; width: 410px;">
                <div class="el-dialog__header">
                    <span class="el-dialog__title">提问</span>
                    <button type="button" aria-label="Close" class="el-dialog__headerbtn"><i  @click="closeIssueWindow" class="el-dialog__close el-icon el-icon-close"></i></button>
                </div>
                <div class="el-dialog__body">
                    <ul>
                        <li v-for="(item, index) in questionData.quizList">
                            <p>
                               <span class="titleHead">{{ item.quizType == 1 ? '判断题' : '问答题'}}</span>
                               <span class="titleName">{{ item.quizName }}</span>
                               <span class="tltleBtnBox">
                                   <button @click="getShortEvent(item.quizType,item.quizId,item.quizName)" class="button-style getQueShort" v-if="!item.running">提问</button>
                                   <button @click="CloseQuestion(item.quizId)" class="button-style getQueShort" v-else>关闭</button>
                                </span>
                            </p>
                            <i class="clear-fix"></i>
                             <!-- 关闭提问显示内容 -->
                            <p v-if="!item.running">
                                 <!-- yx修改 如果数组中包含当前id值赋值 -->
                                <strong v-if="questionIdArr.includes(item.quizId)"  class="askEnd" >
                                    <span class="active"><button  class="button-style ownDetail">最近</button></span>
                                    <span class="answered">已回答：{{ askEnd[item.quizId].totalCount}}人</span>
                                    <span class="level">正确率 {{ askEnd[item.quizId].correctPercent }}</span>
                                    <a @click="getDetailEvent(item.quizId)" class="ownDetail" href="javascript:;"> 详情</a>
                                </strong>
                                <span class="answered">已回答：{{ item.answerCount }}{{item.quizType==1?'人':'次'}}</span>
                                <span class="level" v-if="item.quizType == 1">正确率 {{ item.correctPercent }} </span>
                                <span class="level" v-else>
                                    <i>优 {{ item.excellentPercent }}</i>
                                    <i>良 {{ item.goodPercent }}</i>
                                    <i>差 {{ item.poorPercent }}</i>
                                </span>
                                <span class="delBtnBox" @click="DeleteQuestion(item.quizId)"><button class="button-style delQue">删除</button></span>
                            </p>

                            <p v-else>学生正在答题中...</p>
                            <i class="clear-fix"></i>
                        </li>

                    </ul>
                </div>
                <div class="el-dialog__footer">
                    <span  class="dialog-footer dialogHr">
                        <i @click="issueAddEvent" class="issueAddBtn">+</i>
                    </span>
                </div>
            </div>
        </div>
        <!-- 绘画盒子 -->
        <div id="drawBox">
            <i @click="drawTypeChange('rect','squre')" class="squre type"></i>
            <i @click="drawTypeChange('circle','circle')" class="circle type"></i>
            <i @click="drawTypeChange('pen','pen')" class="pen type iconfont icon-icon--"></i>
            <i class="recall iconfont icon-fanhui2"></i>
            <i class="clean">清除</i>
            <i class="exit">退出</i>
            <div id="penOption">
                <div></div>
                <div>
                    <i @click="penSizeChange('6','point1')" class="point point1"><span></span></i>
                    <i @click="penSizeChange('10','point2')" class="point point2"><span></span></i>
                    <i @click="penSizeChange('14','point3')" class="point point3"><span></span></i>
                    <i @click="penColorChange('#ff0f00','colorRed')" class="colorBtn colorRed"></i>
                    <i @click="penColorChange('#ffbe00','colorYel')" class="colorBtn colorYel"></i>
                    <i @click="penColorChange('#1a9bff','colorBul')" class="colorBtn colorBul"></i>
                    <i @click="penColorChange('#1aad19','colorGre')" class="colorBtn colorGre"></i>
                    <i @click="penColorChange('#4d4d4d','colorBla')" class="colorBtn colorBla"></i>
                </div>
            </div>

        </div>
        <canvas id="drawCanvas"></canvas>
        <!-- 问题详情 -->
        <el-dialog
            title="详情"
            :visible.sync="questionVisible"
            width="490px"
            id="yquestionDetailBox"
            >
            <div class="title" v-if="quizIdClose">正确：{{askEnd[quizIdClose].correctCount}}人</div>
            <div class="isOkName" v-if="quizIdClose">
                {{askEnd[quizIdClose].correctStudents.join(',')}}
            </div>
            <div class="title" v-if="quizIdClose">错误：{{askEnd[quizIdClose].incorrectCount}}人</div>
            <div class="isNoName" v-if="quizIdClose">
               {{askEnd[quizIdClose].incorrectStudents.join(',')}}
            </div>
            <span slot="footer" class="dialog-footer">
                <button class="button-style" @click="questionVisible = false">确 定</button>
            </span>
        </el-dialog>
        <!-- 添加问题 -->
        <el-dialog
            title="添加提问"
            :visible.sync="questionAddVisible"
            width="490px"
            id="yquestionAddBox"
            :close-on-click-modal="false"
            >
            <template>
                <el-radio  v-model="radio" label="1">判断题</el-radio>
                <el-radio  v-model="radio" label="2">问答题</el-radio>
            </template>
            <div class="checkBox">
                <div style="overflow:hidden" >
                    <label class="queNameBox fl">问题：</label>
                    <el-input class="checkInput fl " v-model="checkQueVal" placeholder="请输入内容" type="textarea"  :rows="3" @input="inputData" maxlength="150"></el-input>
                    <p style="position:absolute;  left: 370px; top: 180px; font-size:12px;color:#bbbbbb"> {{titNumber}}/150</p>
                </div>
                <div v-show="radio == 1" style="clear:both; margin-top:10px;">
                    <i class="queAnsBox">答案：</i>
                        <template>
                        <el-radio  v-model="radios" label="1">对</el-radio>
                        <el-radio  v-model="radios" label="2">错</el-radio>
                    </template>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <button class="button-style" @click="questionAddVisible = false">取 消</button>
                <button class="button-style queAddOkBtn" @click="QuestionAddSave">确 定</button>
            </span>
        </el-dialog>
        <!-- 随机点名 -->
        <el-dialog
            title="随堂提问"
            :visible.sync="shortVisible"
            width="600px"
            id="yquestionSetPeo"
            :close-on-click-modal=false
            >
            <div>{{shortAnswer}}</div>
            <div class="nameScrollBox" @click="nameScroll"><i class="iconfont icon-shishidianming"></i><i v-html="nameScrollBtn"></i></div>
            <div class="nameDefault" v-html="nameDefault">
            </div>
            <div style="text-align:center">
                <el-radio v-model="level" label="3">优秀</el-radio>
                <el-radio v-model="level" label="4">良好</el-radio>
                <el-radio v-model="level" label="5">较差</el-radio>
                <el-radio v-model="level" label="6">旷课</el-radio>
            </div>
            <span slot="footer" class="dialog-footer">
                <button class="button-style" @click="cancelFn">取 消</button>
                <button class="button-style queSetOkBtn" @click="questionAddEvent">确 定</button>
            </span>
        </el-dialog>
        <!-- 学生端判断题webscoket -->
        <!-- <div class="judgeDetail" v-if="roles == 'STUDENT' && flag ==true">
            <p>判断题</p>
            <p>{{info.quizName}}</p>
            <el-radio  v-model="radioStudent" label="1">正确</el-radio>
            <el-radio  v-model="radioStudent" label="2">错误</el-radio>
            <div class="button-style" @click="judgeSubmit(info.quizId)">提交</div>
        </div> -->
    </div>
</template>
<script>
    // 绘画
    function Draw(obj,setting){
        this.obj=obj;
        this.type=setting.type||"stroke";
        this.color=setting.color||"#000";
        this.width=setting.width||"1";
    }
    Draw.prototype={
        init:function(){
            this.obj.strokeStyle=this.color;
            this.obj.fillStyle=this.color;
            this.obj.lineWidth=this.width;
        },
            line:function(x,y,x1,y1){
            this.init();
            this.obj.beginPath();
            this.obj.moveTo(x,y);
            this.obj.lineTo(x1,y1);
            this.obj.stroke();
        },
        rect:function(x,y,x1,y1){
            this.init();
            this.obj.beginPath();
            this.obj.rect(x,y,x1-x,y1-y);
            if(this.type=="stroke"){
                this.obj.stroke();
            }else if(this.type=="fill"){
                this.obj.fill();
            }
        },
        circle:function(x,y,x1,y1){
            this.init();
            var r=Math.sqrt(Math.pow(x-x1,2)+Math.pow(y-y1,2));
            this.obj.beginPath();
            this.obj.arc(x,y,r,0,2*Math.PI);
            if(this.type=="stroke"){
                this.obj.stroke();
            }else if(this.type=="fill"){
                this.obj.fill();
            }
        },
        pen:function(x,y,x1,y1){
            this.init();
            this.obj.save();
            this.obj.lineCap="round";
            this.obj.lineTo(x1,y1);
            this.obj.stroke();
            this.obj.restore();
        }
    }
    export default{
        // props: ['websockMsg'],
        data(){
            return {
                //班级Id
                classId:'',
                // 课程ID
                coursesId: '',
                // 章节ID
                ChapterId: '',
                // pdfPath
                displayVersion: '',
                // 视频data
                theoryVideoData: '',
                wid:0,
                hei:0,
                // 视频地址
                videoUrl:'',
                // 视频地址防关闭
                videoUrlCopy:'',
                dialogVisible1: false,
                // 视频显示隐藏
                dialogVisible2: false,
                dialogVisible3: false,
                dialogVisible4: false,
                // 学习笔记值
                noteVal:'',
                penColor:'#ff0f00',
                penSize:'6',
                drawType:'pen',
                questionVisible:false, //问题详情显隐
                questionAddVisible:false,//添加提问显隐

                // 添加问题
                radio:'1',//添加问题类型
                checkQueVal:'',//判断题试题名称
                shortQueVal:'',//简单题试题名称
                radios:'1',//判断题对错

                // 问题详情
                questionData: '',
                // 本次index
                activeIndex: '',
                shortVisible:false,//简答题随机点名显隐
                level:'1',//随机点名等级评定
                isStop:false,//点名停止判定
                nameArr:[],  //学生姓名集合 yx 修改
                nameDefault:"名称滚动",
                nameScrollBtn:"随机点名",
                timer:'',
                // 用户状态
                UserStatus:'',
                //登录角色 ''未登录 TEACHER 教师 ADMIN管理员 STUDENT学生
                roles: '',
                _btn_flag: '',
                // pdf页码
                PdfPage: '',

                //yx添加
                //学生回答
                askEnd: {},
                //回答id判断显隐
                questionIdArr:[],
                //简答题问题
                shortAnswer:'',
                //简答题的问题id
                quizId:'',
                //随机点名后学生id
                studentId:'',
                //正确人数
                correctStudents:'',
                //错误人数
                incorrectStudents:'' ,
                //提问圆点提示
                notificationActive:false,
                //笔记圆点提示
                noteActive:false,
                //学生端回答
                radioStudent:'',
                //消息信息
                info:'',
                //通知消息
                websock: null,
                over: null,
                flag:false,
                //提问的字数
                titNumber:0,
                // 关闭ID存储
                quizIdClose: ''

            }
        },
        created () {
            let self = this
            // 从状态管理获取roles
            self.roles = self.$store.state.user.roles[0]
            // 课程ID
            self.coursesId = self.$route.query.courseId
            // 章节ID
            self.ChapterId = self.$route.query.chapterId
            //班级Id
            self.classId = self.$route.query.classId
            self._btn_flag = self.$route.query._btn_flag

            //初始化socket
           // this.InitWebSocket()
            // 初始化获取资源
            self.InitGetResource()
            // 初始化控制状态
            self.InitUserStatus()


        },
        destroyed: function() {
            //页面销毁时关闭长连接
            //this.over()
        },
        methods:{
            //视频退出再次进入是之前观看的位置
            videoPre(){
                window.onload=function(){
                    var video = document.getElementById('video');
                    var currentTime = localStorage.getItem("currentTime");
                    video.addEventListener("loadedmetadata",function(){
                        this.currentTime = currentTime;
                    });
                    video.addEventListener("timeupdate",function(){
                        var currentTime = Math.floor(video.currentTime);
                        localStorage.setItem("currentTime",currentTime);
                        //console.log(localStorage.getItem("currentTime"));
                    });
                }
            },
            iframeStudent(){
                let self =this
                let timer = null
                let t1 = 0;
                let t2 = 0;
                let windowChild = window.frames["iframetest"];
                let elChild = window.frames[0].document.getElementById("viewerContainer");
                elChild.onscroll = () => {
                    clearTimeout(timer)
                    self.PdfPage = window.sessionStorage.getItem('pdf-page')
                    t1= self.PdfPage
                    timer = setTimeout(()=>{ //这个方法是为了比较两次滚动值，结束滚动事件
                        t2 = self.PdfPage
                        if(t2 === t1){
                             self.noteCommon()
                         }
                    }, 500);
                }
            },
            iframetest(){
                let self =this
                let timer = null
                let t1 = 0;
                let t2 = 0;
                let windowChild = window.frames["iframetest"];
                let elChild = window.frames[0].document.getElementById("viewerContainer");
                elChild.onscroll = () => {
                    clearTimeout(timer)
                    self.PdfPage = window.sessionStorage.getItem('pdf-page')
                    t1= self.PdfPage
                    timer = setTimeout(()=>{ //这个方法是为了比较两次滚动值，结束滚动事件
                        t2 = self.PdfPage
                        if(t2 === t1){

                             self.commonFn()
                             self.noteCommon()
                         }
                    }, 500);
                }
                //yx 点击页面任意位置隐藏笔记和提问弹窗
                // elChild.onclick = () => {
                //     self.$nextTick(function(){
                //         $('#issueDialog').hide();
                //         $("#onlyDialog").hide();
                //    })

                // }
                // this.addWheel($(window.frames[0].document).find('#viewerContainer').get(0),function(event){
                //     var e=e||event;
                //     console.log(e)
                // })
                // let iframe = document.getElementById("iframetest")
                // let iwindow = iframe.contentWindow;
                // console.log(iwindow.document)
                // console.log(iframe.onload)
                // windowChild.window.onscroll = function() {
                //     //变量t是滚动条滚动时，距离顶部的距离
                //     var t = windowChild.document.documentElement.scrollTop || windowChild.document.body.scrollTop;
                //     console.log(t,111);
                // };

                // this.$nextTick(() => {
                //     windowChild.window.onload = () =>{
                //         console.log(111)
                //     }
                // })
                // windowChild.onscroll = function() {
                //     //变量t是滚动条滚动时，距离顶部的距离
                //     var t = windowChild.document.documentElement.scrollTop || windowChild.document.body.scrollTop;
                //     console.log(t,111);
                // };
            },
            //通知webSocket
            InitWebSocket(){
                let self = this
                let hostname = window.location.host
                const wsuri = "ws://"+hostname+"/tes/ws/global"
                self.websock = new WebSocket(wsuri);
                self.websock.onopen = self.websocketonopen;
                self.websock.onmessage = self.websocketonmessage;
                self.over = () => {
                    self.websock.close()
                }
            },
             websocketonopen(){
                console.log('open sucess')
            },
            websocketonmessage(e){ //数据接收
                let self = this
                let redata = JSON.parse(e.data)
                if(redata.type==5){
                    //console.log(redata,999)
                     self.info =redata
                     //self.quizNumber =redata.quizName
                    self.flag = true
                    self.radioStudent=''
                }
            },
            // 初始化控制状态
            InitUserStatus(){
                let self = this
                self.$http.get('/tes/course/'+self.coursesId+'/user-status').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.UserStatus = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //字数
            inputData(){
                var txtVal = this.checkQueVal.length;
                if(txtVal==150){
                    this.titNumber =150
                }else{
                    this.titNumber = txtVal++
                }
            },
            // 初始化获取资源
            InitGetResource() {
                let self = this
                self.$http.get('/tes/course/'+self.coursesId+'/chapter/'+self.ChapterId+'/detail/resource?type=1').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if (res.data.courseware.displayVersion.length > 0) {
                            self.displayVersion = res.data.courseware.displayVersion[0].filePath
                        }
                        self.theoryVideoData = res.data.theoryVideo.displayVersion
                        // self.videoUrl = res.data.theoryVideo.displayVersion[0].filePath
                        if (res.data.theoryVideo.displayVersion.length > 0) {
                            self.videoUrlCopy = res.data.theoryVideo.displayVersion[0].filePath
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // yx 修改 随机提问名字滚动
            nameScroll(){
                //名字滚动
                if(this.nameArr.length>0){
                    if(this.isStop == false){
                        let n = 0;
                        this.isStop = true;
                        this.nameScrollBtn = "停止点名";
                        let self = this;
                        self.timer = setInterval(()=>{
                            self.nameDefault = self.nameArr[n].name
                            self.studentId = self.nameArr[n].id
                            n++;
                            if(n>=self.nameArr.length){
                                n = 0;
                            }

                        },200);

                    }else{
                        clearInterval(this.timer);
                        this.nameScrollBtn = "随机点名";
                        this.isStop = false;
                    }
                }else{
                    this.$message({
                        message: '暂无人员',
                        type: 'warning'
                    })
                    return
                }

            },
            // 点击提问
            getShortEvent(quizType, quizId,quizName){
                // quizType 1. 判断题 2.选择题
                // quizId 问题id
                let self = this
                if(quizType == 1){
                    self.$http.post('/tes/quiz/'+quizId+'/ask').then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            // 初始化问题列表
                            self.questionList()

                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })

                }else{
                    //yx 修改
                     self.$http.get('/tes/quiz/'+self.coursesId+'/students').then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            if(res.data.length>0){
                                self.nameArr = res.data.map((item,i)=>{
                                    return {
                                    name:item.name,
                                    id:item.id
                                    }
                                })
                            }
                        }else{
                            self.$message.error(res.message)
                        }
                        //清空滚动事件及内容
                        self.level =''
                        clearInterval(this.timer);
                        this.nameScrollBtn = "随机点名";
                        self.nameDefault ='名称滚动'
                        self.shortVisible = true
                        self.shortAnswer = quizName
                        self.quizId = quizId

                }).catch(err => {
                    console.log(err)
                })


                }
            },
            // 删除提问
            DeleteQuestion(quizId){
                let self = this
                self.$confirm('是否删除提问?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.$http.delete('/tes/quiz/'+quizId).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            self.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                            // 初始化问题列表
                            self.questionList()
                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }).catch(() => {
                });

            },
            //关闭提问 闪烁消失
            closeDialg(){
                this.notificationActive =false
            },
            //学生端提交问题
            judgeSubmit(quizId){
                let self = this
                if(self.radioStudent==''){
                    self.$message({
                        message: '请选择正确答案',
                        type: 'warning'
                    })
                    return
                }
                self.$http.post('/tes/quiz/'+quizId+'/answer',{
                    answer:self.radioStudent==1?true:false,
                    quizNumber:self.info.quizNumber
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '提交成功',
                            type: 'success',
                        })
                        self.flag = false

                    }else{
                        self.$message.error(res.message)
                        self.flag = false
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 提问问题列表
            questionList(){
                this.commonFn()
                $('#issueDialog').show()
            },
            //yx提问公共接口(只有教师才有)
            commonFn(){
                let self = this
                self.questionData = ''
                let PdfPage = window.sessionStorage.getItem('pdf-page')
                self.$http.get('/tes/quiz?chapterId='+self.ChapterId+'&pageNumber='+PdfPage).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(res.data.size>0){
                           self.questionData = res.data
                           self.notificationActive =true

                        }else{
                           self.notificationActive =false
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 关闭判断题提问
            CloseQuestion(quizId){
                let self = this
                self.$http.post('/tes/quiz/'+quizId+'/end-ask').then(response => {
                    let res = response.data
                    if(res.code == '200'){

                        self.askEnd[quizId] =  res.data
                        if(self.questionIdArr.indexOf(quizId)==-1){
                            self.quizIdClose = quizId
                            self.questionIdArr.push(quizId)
                        }
                        // for(let i = 0; i < self.askEnd.length; i++){
                        //     if(self.askEnd[i].quizId == res.data.quizId){
                        //     }else{
                        //         self.quizIdClose = quizId
                        //         self.askEnd.push(res.data)
                        //     }
                        // }
                        // if(self.askEnd.indexOf(quizId) == -1){
                        //     self.askEnd.push(quizId)
                        // }


                        self.correctStudents = res.data.correctStudents.join(',')
                        self.incorrectStudents = res.data.incorrectStudents.join(',')

                        //将问题id添加到数组中
                        // if(self.questionIdArr.indexOf(quizId)==-1){
                        //     self.questionIdArr.push(quizId)
                        //     console.log(self.questionIdArr,121212)
                        // }
                        // 初始化问题列表
                        self.questionList()

                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //yx取消点名
            cancelFn(){
                this.shortVisible = false
                this.nameScroll()
            },
            //yx 随机点名确定
            questionAddEvent(){
                let self = this
                if(self.nameScrollBtn=='停止点名'){
                    self.$message({
                        message: '请停止随机点名',
                        type: 'warning'
                    })
                    return
                }
                if(self.studentId=='' || self.level==''|| self.nameDefault=='名称滚动'){
                    self.$message({
                        message: '请选择学生回答问题，并评分',
                        type: 'warning',
                    })
                     return
                }
                 const loading = this.$loading({
                    lock: true,
                    text: '正在保存中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                 })
                self.$http.post('/tes/quiz/'+self.quizId+'/assess',{
                    userId: Number(self.studentId),
                    performance: Number(self.level),
                    courseId:Number(self.coursesId),
                    classId: Number(self.classId)
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                       self.shortVisible =false
                       self.commonFn()
                        loading.close()
                    }else{
                        self.$message.error(res.message)
                        loading.close()
                    }
                }).catch(err => {
                    console.log(err)
                    loading.close()
                })
            },
            // 添加问题
            issueAddEvent(){
                let self = this
                // 初始化弹窗值
                self.radio = '1'
                self.checkQueVal = ''
                self.radios = '1'
                self.titNumber= 0
               // $('#issueDialog').hide()
                //问题添加
                self.questionAddVisible = true;
            },
            // 保存问题
            QuestionAddSave() {
                let self = this
                let data = {}
                let PdfPage = window.sessionStorage.getItem('pdf-page')
                if(self.radio == 1){
                    data = {
                        quizName: self.checkQueVal,
                        chapterId: self.ChapterId,
                        pageNumber: PdfPage,
                        quizType: self.radio,
                        judgementAnswer: self.radios == '1' ? true : false
                    }
                }else if(self.radio == 2){
                    data = {
                        quizName: self.checkQueVal,
                        chapterId: self.ChapterId,
                        pageNumber: PdfPage,
                        quizType: self.radio
                    }
                }
                 const loading = this.$loading({
                    lock: true,
                    text: '正在保存中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                 })
                self.$http.post('/tes/quiz',data).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '添加提问成功',
                            type: 'success'
                        })
                        self.questionAddVisible = false
                        //添加完成后，小点开始闪烁
                        self.notificationActive =true
                        //添加问题成功后数据直接显示
                        self.commonFn()
                        loading.close()
                    }else{
                        self.$message.error(res.message)
                        loading.close()
                    }
                }).catch(err => {
                    console.log(err)
                    loading.close()
                })
            },
            getDetailEvent(quizId){
                this.quizIdClose = quizId
                //获取本次详情
                this.questionVisible = true
            },
            penColorChange(val,name){
                //获取绘图颜色
                this.penColor = val;
                 $(".colorBtn").attr("style","");
                 $("."+name).css({"background":"#ffffff","height":"8px","width":"8px","border":"4px solid"+this.penColor});
            },
            penSizeChange(val,name){
                //获取绘图大小
                this.penSize = val;
                 $(".point>span").css("background","#dddddd");
                 $("."+name+">span").css("background","#1aad19");
            },
            drawTypeChange(val,name){
                //绘图类型
                this.drawType = val;
                if(this.drawType == "pen"){
                    $(".type").css({"color":"#474747","border-color":"#474747"});
                    $(".pen").css("color","#1277eb");
                }else{
                    $(".type").css({"color":"#474747","border-color":"#474747"});
                    $("."+name).css("border-color","#1277eb");
                }
            },
            // 视频弹窗
            videoDialog(){
                let self = this
                self.videoUrl = self.videoUrlCopy
                self.dialogVisible2 = true
                self.$nextTick(()=>{
                    self.videoPre()
                })
                //yx 添加禁止笔记和提问弹窗
                $('#issueDialog').hide()
                $("#onlyDialog").hide();
            },
            // 关闭视频弹窗
            closeVideoDialog() {
                let self = this
                self.videoUrl = ''
                var audio = document.getElementById('video');
                audio.pause(); //暂停


            },
            // 关闭笔记
            closeNoteWindow(){
                $("#onlyDialog").hide();
            },
            // 打开笔记获取笔记信息
            openNoteWindow(){
                // let self = this
                // let PdfPage = window.sessionStorage.getItem('pdf-page')
                // self.$http.get('/tes/course/'+self.coursesId+'/chapter/'+self.ChapterId+'/resource/notes?notesType=1&pageNumber='+PdfPage).then(response => {
                //     let res = response.data
                //     if(res.code == '200'){
                //         self.noteVal = res.data
                //
                //     }else{
                //         self.$message.error(res.message)
                //
                //     }
                // }).catch(err => {
                //     console.log(err)
                // })
                this.noteCommon()
                $("#onlyDialog").show()
                $('#issueDialog').hide() //yx 修改
                $('#videos').hide()
            },
            //yx笔记接口公用
            noteCommon(){
                let self = this
                self.noteVal = ''
                let PdfPage = window.sessionStorage.getItem('pdf-page')
                //console.log(PdfPage,33333);
                self.$http.get('/tes/course/'+self.coursesId+'/chapter/'+self.ChapterId+'/resource/notes?notesType=1&pageNumber='+PdfPage).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(res.data.length>0){
                            self.noteVal = res.data
                            self.noteActive =true
                        }else{
                            self.noteActive =false
                        }

                    }else{
                        self.$message.error(res.message)
                        self.noteActive =flase
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 学习笔记保存
            NoteSave(){
                let self = this
                let PdfPage = window.sessionStorage.getItem('pdf-page')
                self.$http.post('/tes/course/'+self.coursesId+'/chapter/'+self.ChapterId+'/resource/notes',{
                    notesType: 1,
                    pageNumber: PdfPage,
                    content: self.noteVal
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                        // 后增加
                        self.noteCommon()
                      //  $("#onlyDialog").hide() 不关闭
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 打开提问
            openQuestion() {
                let self = this
                let PdfPage = window.sessionStorage.getItem('pdf-page')
                self.questionData = ''
                self.$http.get('/tes/quiz?chapterId='+self.ChapterId+'&pageNumber='+PdfPage).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$nextTick(() => {
                            self.questionData = res.data
                        })
                        $('#issueDialog').show()
                        //打开提问后 小蓝点也要闪烁
                        //self.notificationActive = false
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
                $("#onlyDialog").hide()  //yx修改
            },
            // 关闭提问
            closeIssueWindow(){
                $("#issueDialog").hide()
                //123this.questionList()
            },
            drawEvent(){
                //绘图
                let canvas = document.getElementById("drawCanvas");
                let obj = canvas.getContext("2d");
                let colorchoose = this.penColor;
                let widthchoose = this.penSize;
                let typechoose=$(".type");
                let back=$(".recall");
                let clear=$(".clean");
                let exit = $(".exit");
                let linewidth="1";
                let cutflag=false;
                let screenWidth=document.documentElement.clientWidth;
                let screenHeight=document.documentElement.clientHeight;
                let width=screenWidth;
                let height=screenHeight;
                canvas.width=width;
                canvas.height=height;
                let iscut=true;
                let style="stroke";
                let color=this.penColor;
                let arr=[];
                let self = this;
                // 撤销
                back.click(function(){
                    arr.pop();
                    obj.clearRect(0,0,width,height);
                    if(arr.length>0){
                        obj.putImageData(arr[arr.length-1],0,0,0,0,width,height);
                    }
                })
                // 清除
                clear.click(function(){
                    arr=[];
                    obj.clearRect(0,0,width,height);

                })
                //退出
                exit.click(function(){
                    arr=[];
                    obj.clearRect(0,0,width,height);
                    $(".type").css({"color":"#474747","border-color":"#474747"});
                    $(".pen").css("color","#1277eb");
                    $(".point>span").css("background","#dddddd");
                    $(".point1>span").css("background","#1aad19");
                    $(".colorBtn").attr("style","");
                    $(".colorRed").css({"background":"#ffffff","height":"8px","width":"8px","border":"4px solid #ff0f00"});
                    self.drawType = "pen";
                    self.penSize = "6";
                    self.penColor = "#ff0f00";
                    $("#drawBox,#drawCanvas").hide();

                })
                let x,y,w,h;
                let lx,ly,lw,lh;
                let cutdata;

                canvas.onmousedown=function(e){
                    x=e.offsetX;
                    y=e.offsetY;

                    if(self.drawType=="pen"){
                        obj.beginPath();
                        obj.moveTo(x,y);

                    }
                    let draw=new Draw(obj,{type:style,color:self.penColor,width:self.penSize});//实例化构造函数
                    canvas.onmousemove=function(e){
                        w=e.offsetX;
                        h=e.offsetY;
                        if(self.drawType!="eraser"){
                            obj.clearRect(0,0,width,height);
                            if(arr.length!=0){
                                obj.putImageData(arr[arr.length-1],0,0,0,0,width,height);
                            }
                        }
                        if(cutflag&&self.drawType=="cut"){
                            if(iscut){
                                obj.clearRect(lx,ly,lw-lx,lh-ly);
                            }
                            var nx=lx+(w-x);
                            var ny=ly+(h-y);
                            obj.putImageData(cutdata,nx,ny);
                        }else if(self.drawType=="poly"){
                            draw[type](x,y,w,h,n);
                        }else{
                            draw[self.drawType](x,y,w,h);
                        }
                    }
                    document.onmouseup=function(){
                        canvas.onmousemove=null;
                        document.onmouseup=null;

                        arr.push(obj.getImageData(0,0,width,height));
                    }
                }
            },
            drawShowEvent(){
                // 画布显示
                $("#drawBox,#drawCanvas").show();
                //yx 修改 关闭笔记和提问
                $("#onlyDialog").hide();
                $('#issueDialog').hide()
                 this.drawEvent();
                 $(".colorRed").css({"background":"#ffffff","height":"8px","width":"8px","border":"4px solid #ff0f00"});
            },
            issueEvent(){

            }
        },
        mounted(){
            let screenWidth=document.documentElement.clientWidth;
            let screenHeight=document.documentElement.clientHeight;
            this.wid = screenWidth;
            this.hei = screenHeight-8;
        },
        watch: {
            // 'websockMsg': {
            //     handler: function(newval , oldval) {
            //         let self = this
            //         //console.log(newval)
            //         if(newval.type == 5){
            //         //console.log(redata,999)
            //          self.info =newval
            //          //self.quizNumber =redata.quizName
            //         self.flag = true
            //         self.radioStudent=''
            //     }
            //     },
            //     deep: true
            // }
        }
    }
</script>
<style>
    #onlyDialog .el-dialog .el-dialog__body .el-textarea textarea{
        resize: none;
    }
</style>
<style scoped>
.el-textarea{
  width: 300px;
}
.checkBox>>>.el-input__inner{
    width: 300px;
}
.coursewareBox{
    overflow-y: hidden
}
.el-dialog__wrapper{
    box-shadow: 0px 0px 15px #4a4a4a42;
}
/* .judgeDetail{
    width: 300px;
    min-height: 100px;
    background: #fff;
    position: absolute;
    top: 260px;
    right: 25px;
    border-radius: 3px;
    box-shadow: 0 2px 3px  #eee;
    padding: 20px 30px
}
.judgeDetail>p{
    line-height: 25px;
    margin-bottom: 10px
} */
.askEnd{
    font-weight: normal;
    display: block
}
#onlyDialog .el-dialog .el-dialog__footer{
    text-align: center;
}

    /* 问题添加盒子 */
#yquestionAddBox .el-dialog__body{
    padding: 37px 42px;
}
#yquestionAddBox .button-style,#yquestionSetPeo .button-style{
    padding: 0;
    height: 32px;
    width: 90px;
    margin: 0 auto;
}
#yquestionAddBox .dialog-footer,#yquestionSetPeo .dialog-footer{
    display: block;
    text-align: center;
}
#yquestionAddBox .checkBox{
    margin-top: 25px;
}
#yquestionAddBox .el-input__inner{
    width: 330px;
    margin-left: 18px;
}
#yquestionAddBox .queNameBox{
    margin-bottom: 22px;
    display: block;
}
#yquestionAddBox .queAnsBox{
   margin-right: 18px;
}
#yquestionAddBox .queAddOkBtn,#yquestionSetPeo .queSetOkBtn{
    margin-left: 20px;
}
#yquestionAddBox .el-input{
    width: auto;
}
/* 随堂练习 */
#yquestionSetPeo .el-dialog__body{
    padding: 62px 128px;
}
#yquestionSetPeo .el-dialog__body>div:nth-of-type(1){
    font-size: 16px;
    color: #474747;
    margin-bottom: 20px;
    line-height: 25px;
    padding: 0 10px;
}
#yquestionSetPeo .el-dialog__body .nameScrollBox{
    text-align: center;
    font-size: 16px;
    color: #1277eb;
    cursor: pointer;
}
#yquestionSetPeo .el-dialog__body  .nameDefault{
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 28px;
}
   /* 问题详情盒子 */
#yquestionDetailBox .el-dialog__body{
    padding: 50px 60px;
}
#yquestionDetailBox .title{
    font-size: 16px;
    margin-bottom: 25px;
    color: #727272;
}
#yquestionDetailBox .isOkName,#yquestionDetailBox .isNoName{
    font-size: 14px;
    color: #727272;
    line-height: 1.7;
}
#yquestionDetailBox .isOkName{
    margin-bottom: 46px;
}
#yquestionDetailBox .button-style{
    padding: 0;
    height: 32px;
    width: 90px;
    margin: 0 auto;
}
#yquestionDetailBox  .dialog-footer{
    display: block;
    text-align: center;
}
</style>
<style scoped lang="scss">
 @import "./../../../styles/ypublic.scss";
.askPoint{
    position: relative;
    &:after {
        position: absolute;
        content: '';
        width:8px;
        height: 8px;
        background: #1277eb;
        border-radius: 3px;
        top: -9px;
        right: -19px;
    }

}
.notePoint{
    position: relative;
    &:after {
        position: absolute;
        content: '';
        width:8px;
        height: 8px;
        background: #1277eb;
        border-radius: 3px;
        top: -11px;
        right: -20px;
    }

}
// 绘画盒子
.styleactive{
    color: #ffa800;
    background-color:#fff;
    box-shadow:0 0 10px rgba(255, 232, 95, 0.77);
}
 #drawCanvas{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    cursor: pointer;
    display: none;
}

#drawBox{
    width:320px;
    height: 70px;
    position: absolute;
    z-index: 10;
    top:50px;
    right: 95px;
    background:$white;
    border-radius:5px;
    font-size: $fs16;
   display: none;
    i{
        float: left;
        height: 18px;
        margin-top:26px;
        cursor: pointer;
        margin-left: 25px;
          color: #474747;
    }
    .pen{
        color:#1277eb;
    }
    .squre{
        width: 20px;
        border: 1px solid $title-gray;
        height: 16px;
    }
    .circle{
        width: 16px;
        border: 1px solid #000; //yx修改
        height: 16px;
        border-radius: 50%;

    }
    .pen,.recall{
        font-size: 22px;
        padding-top: 5px;//yx修改
    }
    #penOption{
        height: 44px;
        width: 230px;
        position: absolute;
        top: 80px;
        left: 10px;
        div:nth-of-type(1){
            width: 0;
            height: 0;
            border-top: 0 solid transparent;
            border-bottom: 8px solid white;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            margin: 0 auto;
        }
        div:nth-of-type(2){
            background: $white;
            border-radius: $br5;
            height: 36px;
            width: 230px;
            margin: 0;
            .colorBtn{
                height: 16px;
                width: 16px;
                 margin: 10px 0 0 12px;
            }
            .colorRed{
                background: #ff0f00;
            }
            .colorYel{
                background: #ffbe00;
            }
            .colorBul{
                background: #1a9bff;
            }
            .colorGre{
                background: #1aad19;
            }
            .colorBla{
                background: #4d4d4d;
            }
            .point1,.point2,.point3{
                width: 14px;
                height:14px;
                margin: 11px 0 0 12px;
            }
            .point1{
                span{
                    background:#1aad19;
                    border-radius: $br50;
                    height: 6px;
                    width: 6px;
                    display: block;
                    margin: 5px;
                }
            }
            .point2{
                span{
                    background:$gray;
                    border-radius: $br50;
                    height: 10px;
                    width: 10px;
                    display: block;
                    margin: 2px;
                }
            }
            .point3{
                span{
                    background:$gray;
                    border-radius: $br50;
                    height: 14px;
                    width: 14px;
                    display: block;
                    margin: 0;
                }
            }
        }
    }
}
// 笔记盒子 提问盒子
    #onlyDialog{
        // height: 396px;
        width: 490px;
        position: absolute;
        left: initial;
        top: 210px;
        bottom: initial;
        right: 95px;
        display: none;
    }
    #issueDialog{
        width: 410px;
        position: absolute;
        left: initial;
        top: 300px; //yx修改
        bottom: initial;
        right: 95px;
        max-height: 500px;
        overflow-x: hidden
    }
    #onlyDialog .el-dialog,#issueDialog  .el-dialog{
        border-radius: 5px;
        margin: 0!important;
        padding: 0;

    .el-dialog__header {
        background: $white;

        height: auto;
        line-height:initial;
        padding: 20px 20px 10px;

        .el-dialog__title {
            color: #070e28;
            line-height: 24px;
            font-size: 16px;
            float: left;
        }
    }

    .el-dialog__headerbtn {
        top: 20px;

        .el-dialog__close {
            color: #070e28;

            &:hover {
                color: #070e28;
            }
        }
    }
    #noteVal{
        overflow: auto;
    }
}
    //提问盒子
    .issueAddBtn{
        width: 368px;
        height: 46px;
        border: 1px solid #e1e1e1;
        text-align: center;
        line-height: 46px;
        font-size: 20px;
        display: block;
        color: #b8b8b8;
        border-radius: 5px;
        cursor: pointer;
    }
    #issueDialog .el-dialog__body ul li p{
        min-height: 30px;
    }
    #issueDialog .el-dialog__body ul li p>span{
        float: left;
        line-height: 1.7;
    }
    #issueDialog .el-dialog__body ul li p>span.delBtnBox{
        float: right;
    }
    #issueDialog .el-dialog__body ul li p:nth-of-type(2){
        font-size: $fs14;
    }
    #issueDialog .el-dialog__body ul li {
        margin-bottom: 25px;
        padding-bottom: 18px;
        border-bottom: 1px solid #e8e8e8;
    }
    #issueDialog .el-dialog__footer{
        padding: 0 20px 20px;
    }
    #issueDialog .el-dialog__body{
            padding: 30px 20px 0;
    }
    .answered{
        width: 90px;
        margin-right: 7px;
    }
    .answereds{
        width: 236px;
        margin: 0 18px 0 14px;
        a{
            text-decoration:underline;
            color: #385899;
        }
    }
    .active{
        margin-right: 4px;
    }
    .delBtnBox{
        float: right;
    }
    .level{
        width: 151px;
        margin-right: 18px;
    }
    .titleHead{
        width: 50px;
        font-size: $fs16;
        color: #385899;
        margin-right: 20px;
    }
    .titleName{
        width: 230px;
        font-size: $fs16;
        color: $title-gray;
        word-break: break-all;
        margin-right: 18px;
    }
    #issueDialog .el-dialog__body button{
        height: 22px;
        width: 50px;
        font-size: 14px;
        padding: 0;
        line-height: 22px;
        margin-top: -3px;
    }
    //主体
    #jx-contain{
        position: relative;
        .sideBox{
            position: absolute;
            top:50px;
            right:25px;
            width: 60px;
            background: #1c1f21;
            color: $white;
            text-align: center;
            border-radius: 5px;
            .sideBoxActive{
                color: #6d6d6d;
                pointer-events: none;
                cursor: default;
                opacity: 0.6;
                .iconfont{
                    display: block;
                    margin-bottom: 8px;
                    font-size: 19px;
                    color: #6d6d6d;
                }
            }
            li{
                height: 36px;
                width: 25px;
                display: block;
                font-size: 12px;
                margin: 20px auto 44px;
                position: relative;
                cursor: pointer;
                .iconfont{
                    display: block;
                    margin-bottom: 8px;
                    font-size: 19px;

                }

            }
        }

    }
    // 暂无数据
    .no-data-tips{
        padding-top: 10%;
        text-align: center;
        &>p{
            margin: 30px 0;
            color: #9999;
            font-size: 16px
        }
    }
</style>
